<div class="box">
    <div class="box-header">
        <h3 class="box-title">
            用户列表
            <small v-if="thisKeywords">包含 “{{ thisKeywords }}” 的结果</small>
            <small>(数据最后更新于{{ page.lastTimestamp | localDateString }})</small>

            <span  v-if="page.updated > 0" @click="reload" data-toggle="tooltip" title="" class="badge bg-red" data-original-title="数据更新: {{ page.updated }}">{{ page.updated }}</span>
        </h3>
        <div class="box-tools pull-right">
            <div class="has-feedback pull-left">
                <input @change="reload" lazy v-model="thisKeywords" type="text" class="form-control input-sm" placeholder="搜索用户">
                <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
            <div class="pull-left tool-buttons">
                <button @click="addUser" type="button" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i>&nbsp;添加用户</button>
                <button v-show="false" @click="testUser" type="button" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i>&nbsp;测试</button>
            </div>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th class="text-center" style="width: 10px">#</th>
                <th>用户名</th>
                <th>姓名</th>
                <th class="text-center">性别</th>
                <th class="text-center">状态</th>
                <th class="text-center">更新时间</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="user in page.list">
                    <td class="text-center">{{ user.id }}.</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.realName }}</td>
                    <td class="text-center" >{{{ user.sex | sexLabel }}}</td>
                    <td class="text-center" >{{ user.stateLabel }}</td>
                    <td class="text-center" >{{ user.updateTime | localDateString }}</td>
                    <td class="text-center">
                        <button @click="showDetail(user.id)" title="查看用户详情" data-toggle="tooltip" data-placement="left" class="btn btn-info btn-sm">
                            <i class="glyphicon glyphicon-zoom-in"></i>
                        </button>
                        <button @click="edit(user.id)" title="修改用户信息" data-toggle="tooltip" data-placement="top" class="btn btn-warning btn-sm">
                            <i class="glyphicon glyphicon-pencil"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
            <tr>
                <th  class="text-center" style="width: 10px">#</th>
                <th>用户名</th>
                <th>姓名</th>
                <th class="text-center">性别</th>
                <th class="text-center">状态</th>
                <th class="text-center">更新时间</th>
                <th>
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
    <!-- /.box-body -->
    <div class="box-footer no-padding">
        <div class="mailbox-controls">
            <!-- Check all button
            <button type="button" class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i>
            </button>-->
            <div class="btn-group">
                <!--
                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></button>
                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-reply"></i></button> -->
                <button @click="pull" type="button" class="btn btn-default btn-sm"><i class="fa fa-share"></i></button>
            </div>
            <!-- /.btn-group -->
            <button @click="reload" type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>

            <div class="pull-right">
                共 {{ page.totalRow }} 条数据
                <div  class="btn-group">
                    <button @click="loadMore" type="button" class="btn btn-default btn-sm" :disabled="page.lastPage">
                        {{ page.lastPage? '已全部加载' : '加载更多' }}
                        <i v-if="!page.lastPage" class="fa fa-chevron-right"></i>
                    </button>
                </div>
                <!-- /.btn-group -->
            </div>
            <!-- /.pull-right -->
        </div>
    </div>
</div>
<!-- /.box -->